<template>
  <div class="knowledge-list">
    <div class="anchor"></div>
    <div class="list-wrap">
      <el-card class="box-card" v-loading="loading">
        <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
        <div
          class="list--wrap-item clearfix"
          v-for="v in tableData"
          :key="v.id"
        >
          <div class="l-img img-hover" @click="toCourseItem(v)">
            <img :src="knowledgeCoverImg(v)" />
          </div>
          <div class="r-txt">
            <p class="title sheng" @click="toCourseItem(v)">
              {{ $route.meta.type == 1 ? '知识点名称：' : '资源名称：' }}
              <span class="txt-hover">{{ v.name }}</span>
            </p>
            <ul :class="{ 'course-ul': $route.meta.type == 1 }">
              <li v-if="$route.meta.type == 1" class="sheng">
                <b class="row-name">所属章节：</b>
                <span class="chapter-name">
                  <!-- {{ v.sysKnowledgeChapterList[0].courseChapterName }} -->
                  {{ v.chapterFullName }}
                </span>
              </li>
              <li class="sheng">
                <b class="row-name">作者：</b>
                <span class="row-cont col">{{ v.author ? v.author : '' }}</span>
              </li>
              <li class="sheng">
                <b class="row-name">资源标签：</b>
                <span class="row-cont col">{{
                  v.labelNames || '暂无标签'
                }}</span>
              </li>
              <li class="sheng" v-if="showModule('glszd')">
                <b class="row-name"
                  >{{ showModuleName('glszd') || '关联思政点' }}：</b
                >
                <span class="row-cont col">{{ educationList(v) }}</span>
              </li>
            </ul>
            <div class="file-count" @click="toCourseItem(v)">
              <span class="file-title">附件资源：</span>
              <FileCountPro :data="v.sysKnowledgeFilesVO" :fileType="true" />
              <div class="look-down">
                <LookDown txtShow :count="v.evaluateVO" />
              </div>
            </div>
          </div>
          <div style="clear: both"></div>
          <div class="line"></div>
        </div>
        <Pagination
          v-show="parseInt(pageObj.count) > 0"
          :total="parseInt(pageObj.count)"
          @change="getList"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        />
      </el-card>
    </div>
  </div>
</template>
<script>
import { openApiSysKnowledgeQuery } from '@/api/openApi'
import setInfo from '@/mixins/setInfo.js'
import { getSession, removeSession } from '@/utils/session'
import { KnowledgeSetInfo } from '@/views/Admin/courseLibrary/mixins/KnowledgeSetInfo'
import homeConfig from '@/mixins/homeConfig'
import Bus from '@/utils/bus.js'
export default {
  mixins: [homeConfig, setInfo, KnowledgeSetInfo],
  components: {
    LookDown: () => import('@/components/home/lookDown.vue'),
    FileCountPro: () => import('@/components/home/fileCountPro.vue'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      score: null,
      chapterData: [],
      listQuery: {
        page: 1,
        limit: 10,
        courseId: '',
        chapterId: '',
        type: this.$route.meta.type,
        queryMode: this.$route.query.queryMode || 1, //查询模式；1-发布，2-预览
        labelValue: '',
      },
      tableData: [],
      pageObj: {},
      loading: false,
      curChapter: '',
    }
  },
  watch: {
    $route(v) {
      this.getList(true)
    },
  },
  mounted() {
    if (this.$route.meta.type == 3) {
      this.$store.commit('SETCURCOURSE')
      this.$store.commit('SETKNOLEDGE')
    }
    this.getList(true)
    Bus.$on('refreshListHomeChapter', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList(true)
    })
    this.$bus.$on('e-knowledgeList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList(true)
    })
  },
  beforeDestroy() {
    Bus.$off('refreshListHomeChapter')
    this.$bus.$off('e-knowledgeList')
  },
  methods: {
    getList(flag) {
      this.listQuery.type = this.$route.meta.type
      this.listQuery.courseId =
        this.$store.getters.courseId || this.$route.query.courseId
      let curChapter = getSession('curChaper')
      if (curChapter) {
        this.listQuery.chapterId = curChapter
      }
      this.loading = true
      openApiSysKnowledgeQuery(this.listQuery).then((res) => {
        setTimeout(() => {
          this.tableData = res.data.data
          this.pageObj = res.data
          removeSession('curChaper')
          this.listQuery.chapterId = ''
          this.loading = false
        }, 200)
        if (flag) return
        this.$nextTick(() => {
          document.querySelector('.anchor').scrollIntoView()
        })
      })
    },
    toCourseItem(row) {
      let { level } = this.$store.getters
      if (level == undefined || level >= 3) {
        this.warnMsg('抱歉，您没有浏览权限')
        return
      }
      this.$store.commit('SETKNOLEDGE', row)
      let name = 'knowdedge-detail'
      switch (this.type) {
        case 1:
          name = 'knowdedge-detail'
          break
        case 2:
          name = 'specialty-knowdedge'
          break
        case 3:
          name = 'arms-knowdedge-home'
          break
        case 4:
          name = 'topic-knowdedge-detail'
          break
        default:
          name = 'knowdedge-detail'
      }
      this.$router.push({
        name: name,
        query: { id: row.id, queryMode: this.listQuery.queryMode },
      })
    },
  },
}
</script>
<style scoped lang="scss" >
.knowledge-list {
  position: relative;
  width: 100%;
  .anchor {
    position: absolute;
    right: 0;
    top: -85px;
    width: 1px;
    height: 1px;
    z-index: 1;
  }
  .list-wrap {
    width: 100%;
    margin: 0 auto;
    .list--wrap-item {
      position: relative;
      height: 170px;
      padding: 20px;
      .line {
        margin-top: 16px;
        width: 100%;
        height: 1px;
        background: #eee;
      }
      .l-img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 290px;
        height: 170px;
        border: 1px solid #eee;
        box-sizing: border-box;
        z-index: 2;
      }
      .r-txt {
        width: 100%;
        height: 170px;
        color: #333;
        position: relative;
        padding-left: 310px;
        box-sizing: border-box;
        ul {
          margin-bottom: 10px;
          height: 100px;
          // &.course-ul {
          //   margin-bottom: 10px;
          // }
          li {
            line-height: 26px;
          }
        }
        .row-name {
          font-weight: bold;
          position: relative;
          padding-left: 1em;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            width: 4px;
            height: 16px;
            background-color: var(--colorH1);
          }
        }
        .chapter-name {
          color: #666;
        }
        .file-count {
          position: relative;
          height: 24px;
          line-height: 24px;
          .file-title {
            float: left;
            color: #333;
          }
        }
        .look-down {
          position: absolute;
          right: 0;
          bottom: 0;
          height: 24px;
        }
        .title {
          padding-bottom: 6px;
          font-size: 20px;
          font-weight: 900;
          color: #333;
        }
        .col {
          color: #666;
        }
        .txt-info {
          .txt-row {
            width: 100%;
            margin-bottom: 14px;
            .row-cont {
              width: 90%;
            }
            .four-ellipsis {
              height: 100px;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
  .txt-ico {
    margin-top: 20px;
    color: #aaaaaa;
    i {
      padding-right: 10px;
      font-weight: 900;
    }
    img {
      margin-right: 10px;
    }
    span {
      margin-right: 25px;
    }
    .i-size i {
      font-size: 16px;
    }
  }
}
.knowledge-list .el-card.box-card.is-always-shadow {
  margin-bottom: 20px;
}
</style>
<style scoped>
.knowledge-list >>> .el-card__body {
  padding: 0;
  padding-bottom: 50px;
  padding-top: 0px;
}
</style>